<template>
    <div>
        <a-row :gutter="24">
            <a-col :span="12">
                <a-card :bordered="false">
                    <div style="height: 6.2rem;position:relative;">
                        <div>
                            <h2 style="display:inline-block"> 【{{customerName}}】医资信息</h2>
                            <a-input-search v-model="userName"  @search="searchUserName"  placeholder="医师姓名"   style="width: 200px;display: inline;float: right"/>

                        </div>
                        <div>
                            <a-radio-group  default-value="0" @change="onChangeImg" >
                                <a-radio-button value="0" style="margin-right: 10px">
                                    执业证书
                                </a-radio-button>
                                <a-radio-button value="1">
                                    资格证书
                                </a-radio-button>
                            </a-radio-group>
                        </div>
                        <div v-if="preImgList.length==0"  style="height: 4rem;width: 6rem;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0;display:table-cell;vertical-align:middle;text-align:center;">
                            <span class="preImgListTip"  >暂无相关信息！</span>
                        </div>
                        <div class="thumb-example">
                            <!-- 大轮播图 -->
                            <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
                                <swiper-slide  class="slide-1 swiper-zoom-container" v-for="(item,index) in preImgList"  :key="item.id">
                                    <div v-viewer="options" @show="show" @hidden="hidden" style="width: 5rem;height: 3rem;">
                                        <img class="j-editable-image"  :src="getImgView(item.url)" alt="无图片" width="100%" height="100%"  >
                                    </div>
                                </swiper-slide>
                                   <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                                   <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
                            </swiper>
                            <!-- 小缩略图 -->
                            <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
                                <swiper-slide class="slide swiper-zoom-container" style="width:1.5rem;height:1.5rem;"  v-for="(item,index) in preImgList"  :key="item.id" >
                                    <img class="j-editable-image" :src="getImgView(item.url)" alt="无图片" width="100%" height="100%"  >
                                </swiper-slide>
                                <!--v-if="preImgList.length>0"-->
                                <!--<div class="swiper-button-next swiper-button-black" slot="button-next"></div>-->
                                <!--<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>-->
                            </swiper>
                        </div>
                    </div>
                </a-card>
            </a-col>

            <a-col :span="12">
                <a-card :bordered="false">
                    <div style="height: 6.2rem">
                        <h2 v-if="customerName">【{{customerName}}】医院信息</h2>
                        <h2 v-else> 医院信息</h2>
                        <div>
                            <a-radio-group  default-value="0" @change="onChange"  style="margin-bottom: 30px">
                                <a-radio-button value="0" style="margin-right: 10px">
                                    营业执照
                                </a-radio-button>
                                <a-radio-button value="1">
                                    卫生许可证
                                </a-radio-button>
                            </a-radio-group>
                            <div style=" text-align:center; margin:0 auto;">
                                <div v-viewer="options" @show="show" @hidden="hidden">
                                    <img style="width:5rem; height:3.5rem; background-color:#CCC; border:#000 1px solid;"
                                         class="j-editable-image"  :src=" checkedNum == '1' ? getImgView(licenceImg) : getImgView(businessLicenseImg)" alt="无图片"/>
                                </div>
                                <h5 class="certificateNum" v-if="checkedNum == '0'" > 编号：{{ businessLicenseNumber || '--'}}</h5>
                                <h5 class="certificateNum" v-else > 编号：{{ licenceNumber || '--'}}</h5>
                            </div>
                        </div>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </div>

</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction } from '@/api/manage'

  export default {
    name: 'Two',
    mixins: [JeecgListMixin, mixinDevice],
    props: {
      // 父组件传递过来的值
      // editData: {
      //   type: Object,
      //   default: ''
      // },
      customerNumber: {
        type: String,
        default: ''
      },
      customerName: {
        type: String,
        default: ''
      },
      businessLicense: {
        type: String,
        default: ''
      },
      businessLicenseNumber: {
        type: String,
        default: ''
      },
      licence: {
        type: String,
        default: ''
      },
      licenceNumber: {
        type: String,
        default: ''
      },
    },

    data() {
      return {
        swiperOptionTop: {
          zoom: true,
          // loop: true,
          loopedSlides: 5,
          spaceBetween: 10,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          // autoplay: {  //自动轮播
          //   delay: 2000,
          //   disableOnInteraction: false
          // },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        swiperOptionThumbs: {
          // loop: true,
          loopedSlides: 8, // looped slides should be the same
          spaceBetween: 10,
          centeredSlides: true,
          slidesPerView: 'auto',
          touchRatio: 0.2,
          slideToClickedSlide: true,
          // navigation: {
          //   nextEl: '.swiper-button-next',
          //   prevEl: '.swiper-button-prev'
          // }
        },
        // customerNumber:null,
        // 演示解决小董本地服务器图片显示不出来的问题 （发布请删除）
        businessLicenseImg: null,
        // businessLicenseNum: null,
        licenceImg: null,
        // licenceNum: null,
        // customerName:null,
        preImgList:[],//图片地址
        checkedNum : 0, // 选中要查看的证书
        userName:'',// 输入的医师姓名参数
        options:{},
        checkedImg : 0,  // 选中要查看的医生护士证书类型
        practisingList:[],// 执业证书集合
        qualification:[],// 资格证书
      }
    },

    mounted () {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
      //参数赋值
      this.getDataSource()
    },

    watch: {
      // 如果 `customerNumber` 发生改变，这个函数就会运行
      customerNumber: function(newValue, oldValue) {
          this.userName = '',
          this.getDataSource()
      },
    },
    methods: {
      // 选中事件
      async onChange(e) {
        this.checkedNum = e.target.value
      },
      async onChangeImg(e){
        this.checkedImg = e.target.value
          if(this.checkedImg == 1){
              this.preImgList = this.qualification
          }else{
              this.preImgList = this.practisingList
          }
      },
      // 获取医院信息图片
      async getDataSource(){
        // 演示解决小董本地服务器图片显示不出来的问题 （发布请删除）
        // this.businessLicenseImg = `https://www.gzhc.vip/recycle/${this.businessLicense}`
        // this.licenceImg = `https://www.gzhc.vip/recycle/${this.licence}`
        // this.businessLicenseNum = this.editData.businessLicenseNumber
        // this.licenceNum = this.editData.licenceNumber
        // this.customerNumber = this.editData.customerNumber
        // this.customerName = this.editData.customerName
        this.businessLicenseImg = this.businessLicense
        this.licenceImg = this.licence
        let params = {
          customerNumber : this.customerNumber,
          userName : this.userName
        }
        // this.checkPreImg = null;
        let praImgList = [];
        let quaImgList = [];
        let praList = [];
        let quaList = [];
        let praTest = [];
        let quaTest = [];
        let praArr = [];
        let quaArr = [];

        let res = await getAction('/hc/hcMedicalCare/queryPageList',params)
        if (res && res.success) {
          let data = res.result || [];
          data.forEach((item, index) => {
              let obj = {
                  url : item['practisingCertificate']
              }
              let tes = {
                  url : item['qualificationCertificate']
              }
              praList.push(obj)
              quaList.push(tes)
          })
          praList.forEach((item,index) => {
              if(item.url!=null){
                  if(item.url.indexOf(',')){
                      let obj =  item.url.split(',')
                      praTest.push(obj)
                  }
              }

          })
            quaList.forEach((item,index) => {
                if(item.url!=null) {
                    if (item.url.indexOf(',')) {
                        let obj = item.url.split(',')
                        quaTest.push(obj)
                    }
                }
            })
            praArr = praTest.flat(Infinity)
            quaArr = quaTest.flat(Infinity)
            praArr.forEach((item, index) => {
                let obj = {
                  id: index,
                  url : `https://www.gzhc.vip/recycle/${item}`,
                };
                praImgList.push(obj)
            })
            quaArr.forEach((item, index) => {
                let obj = {
                    id: index,
                    url : `https://www.gzhc.vip/recycle/${item}`,
                };
                quaImgList.push(obj)
            })
        }
        this.practisingList = praImgList
        this.qualification = quaImgList
        this.preImgList =  this.practisingList

      },

      // 根据医生姓名来查
      searchUserName(){
        this.getDataSource();
      },
      // clickPreImg(index){
      //   this.checkPreImg = this.preImgList[index];
      // },

      // 点击图片事件
      show(){
        console.log('这是放大事件');
      },
      hidden(){
        console.log('这是消失事件');
      },
    },
  }
</script>

<style lang="less" scoped >
    .ant-radio-button-wrapper-checked{
        background-color: #F2AF06 !important;
    }
    .thumb-example {
        width: 8rem;
        margin-top: 20px;
        // background: #000;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top {
        // height: 80% !important;
        height: 3.5rem;
        width: 100%;

    }
    .gallery-thumbs {
        height: 20% !important;
        box-sizing: border-box;
        padding: 10px 0px;
        width: 8rem;
        margin-left: 2px;
        .swiper-button-next {
            right: 0px;
        }
        .swiper-button-prev {
            left: 0px;
        }
        .swiper-button-next,
        .swiper-button-prev {
            background-color: #fefefe;
            width: 30px;
            text-align: center;
            height: 101px;
            top: 26%;
            /*div {*/
                /*margin-top: 30px;*/
                /*background: rgb(207, 205, 205);*/
                /*height: 45px;*/
                /*!*border-radius: 50%;*!*/
                /*!*img {*!*/
                    /*!*margin: 7px 0 0 2px;*!*/
                    /*!*width: 30px;*!*/
                /*!*}*!*/
            /*}*/
        }
        .swiper-button-next:hover div {
            background: rgb(189, 186, 186);

        }
        .swiper-button-prev:hover div {
            background: rgb(189, 186, 186);
        }
        /*.swiper-button-black{*/
            /*height: 60px!important;*/
            /*margin-top: -12px!important;*/
        /*}*/
    }
    .gallery-thumbs .swiper-slide {
        width: 20%;
        height: 80px;
        // opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
        border: 2px solid red;
    }
    .preImgListTip{
        font-size: 16px;
        font-style: italic;
        color: white;
        line-height: 4rem;
    }
    .certificateNum{
        color: white;
        margin-top: 20px
    }



</style>




